@charset "utf-8";

.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both}
.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite}
.animated.hinge {-webkit-animation-duration: 2s;animation-duration: 2s}
.backIn{height:100%;background:rgba(0,0,0,.6);position:absolute;color:#FFF;transition:all 0.3s ease-in 0s;}

/**上->下开始**/
.fadeInUp {-webkit-animation-name: fadeInUp;animation-name: fadeInUp}
@-webkit-keyframes fadeInUp {
	0% {opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}
	100% {opacity:1;-webkit-transform:none;transform:none}
}
.backInTop{left:0;top:-100%;}
.ProCont ul li:hover .backInTop{top:0;}
/**上->下结束**/

/**下->上开始**/
.fadeInDown {-webkit-animation-name: fadeInDown;animation-name: fadeInDown}
@-webkit-keyframes fadeInDown {
	0% {opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}
	100% {opacity:1;-webkit-transform:none;transform:none}
}
.backInBottom{left:0;bottom:-100%;}
.ProCont ul li:hover .backInBottom{bottom:0;}
/**下->上结束**/

/**左->右开始**/
.fadeInLeft {-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft}
@-webkit-keyframes fadeInLeft {
	0% {opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}
	100% {opacity:1;-webkit-transform:none;transform:none}
}
.backInLeft{left:-100%;top:0;}
.ProCont ul li:hover .backInLeft{left:0;}
/**左->右结束**/

/**右->左结束**/
.fadeInRight {-webkit-animation-name: fadeInRight;animation-name: fadeInRight}
@-webkit-keyframes fadeInRight {
	0% {opacity:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}
	100% {opacity:1;-webkit-transform:none;transform:none}
}
.backInRight{right:-100%;top:0;}
.ProCont ul li:hover .backInRight{right:0;}
/**右->左结束**/

/**淡入淡出**/
.backInFade{left:0;top:0;opacity:0;}
.ProCont ul li:hover .backInFade{opacity:1;}


.delay ul li:nth-child(2){animation-delay:.2s;-webkit-animation-delay:.2s; }
.delay ul li:nth-child(3){animation-delay:.4s;-webkit-animation-delay:.4s; }
.delay ul li:nth-child(4){animation-delay:.6s;-webkit-animation-delay:.6s; }
.delay ul li:nth-child(5){animation-delay:.8s;-webkit-animation-delay:.8s; }
.delay ul li:nth-child(6){animation-delay:1s;-webkit-animation-delay:1s; }
.delay ul li:nth-child(7){animation-delay:1.2s;-webkit-animation-delay:1.2s; }
.delay ul li:nth-child(8){animation-delay:1.4s;-webkit-animation-delay:1.4s; }
.delay ul li:nth-child(9){animation-delay:1.6s;-webkit-animation-delay:1.6s; }